<template>
  <div class="home" v-loading="isLoading">
    <div class="top">
      <div class="psa">
        <el-cascader
          size="mini"
          style="width: 300px"
          :options="OrganTree"
          :props="{
            checkStrictly: true,
            value: 'Id',
            label: 'Name',
            children: 'Children',
          }"
          clearable
          v-model="checkHospitalId"
          @change="
            (query.orgId = checkHospitalId[checkHospitalId.length - 1]),
              getInfo()
          "
        ></el-cascader>
      </div>
      <div class="psb">
        <el-date-picker
          v-model="value1"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          size="mini"
          @change="timer"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
        <!-- <el-select
          v-model="query.year"
          placeholder="年度"
          @change="getInfo"
          size="small"
        >
          <el-option label="2024年度" value="2024"> </el-option>
        </el-select> -->
      </div>
      <span style="display: inline-block"
        ><dv-decoration-7 style="height: 30px"
          ><span style="font-size: 22px; display: inline-block; padding: 0 10px"
            >满意度调查分析大屏</span
          ></dv-decoration-7
        ></span
      >
    </div>
    <el-row style="margin-top: 20px">
      <el-col :span="8" style="padding: 10px">
        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">门诊患者问卷</p>
            <el-row>
              <el-col :span="8">
                <p class="tac c01">
                  {{ 门诊月info.总数量 ? 门诊月info.总数量 : "0" }}
                </p>
                <p class="tac cfff">问卷数量</p>
              </el-col>
              <el-col :span="8"
                ><p class="tac c01">
                  {{ 门诊月info.满意率 ? 门诊月info.满意率 : "0" }}%
                </p>
                <p class="tac cfff">满意率</p></el-col
              >
              <el-col :span="8"
                ><p class="tac c01">
                  {{ 门诊月info.填报率 ? 门诊月info.填报率 : "0" }}%
                </p>
                <p class="tac cfff">填报率</p></el-col
              >
            </el-row>
            <qiun-vue-ucharts
              type="column"
              :opts="opts1"
              :chartData="chartData1"
              class="charts-box2"
            />
          </dv-border-box-12>
        </div>
        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">
              <span style="margin-right: -195px">各维度得分</span
              ><el-select
                style="float: right"
                v-model="templateId1"
                placeholder="模板"
                @change="get门诊雷达()"
                size="small"
              >
                <el-option
                  v-for="item in 模板list"
                  :key="item.Id"
                  :label="item.Name"
                  :value="item.Id"
                >
                </el-option>
              </el-select>
            </p>
            <qiun-vue-ucharts
              type="radar"
              :opts="opts2"
              :chartData="chartData2"
              class="charts-box"
            />
          </dv-border-box-12>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 10px">
        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">住院患者问卷</p>
            <el-row>
              <el-col :span="8">
                <p class="tac c02">
                  {{ 住院月info.总数量 ? 住院月info.总数量 : "0" }}
                </p>
                <p class="tac cfff">问卷数量</p>
              </el-col>
              <el-col :span="8"
                ><p class="tac c02">
                  {{ 住院月info.满意率 ? 住院月info.满意率 : "0" }}%
                </p>
                <p class="tac cfff">满意率</p></el-col
              >
              <el-col :span="8"
                ><p class="tac c02">
                  {{ 住院月info.填报率 ? 住院月info.填报率 : "0" }}%
                </p>
                <p class="tac cfff">填报率</p></el-col
              >
            </el-row>
            <qiun-vue-ucharts
              type="column"
              :opts="opts3"
              :chartData="chartData3"
              class="charts-box2"
            />
          </dv-border-box-12>
        </div>
        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">
              <span style="margin-right: -195px">各维度得分</span
              ><el-select
                style="float: right"
                v-model="templateId2"
                placeholder="模板"
                @change="get住院雷达()"
                size="small"
              >
                <el-option
                  v-for="item in 模板list"
                  :key="item.Id"
                  :label="item.Name"
                  :value="item.Id"
                >
                </el-option>
              </el-select>
            </p>
            <qiun-vue-ucharts
              type="radar"
              :opts="opts4"
              :chartData="chartData4"
              class="charts-box"
            />
          </dv-border-box-12>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 10px">
        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">职工问卷</p>
            <el-row>
              <el-col :span="8">
                <p class="tac c03">
                  {{ 其他月info.总数量 ? 其他月info.总数量 : "0" }}
                </p>
                <p class="tac cfff">问卷数量</p>
              </el-col>
              <el-col :span="8"
                ><p class="tac c03">
                  {{ 其他月info.满意率 ? 其他月info.满意率 : "0" }}%
                </p>
                <p class="tac cfff">满意率</p></el-col
              >
              <el-col :span="8"
                ><p class="tac c03">
                  {{ 其他月info.填报率 ? 其他月info.填报率 : "0" }}%
                </p>
                <p class="tac cfff">填报率</p></el-col
              >
            </el-row>
            <qiun-vue-ucharts
              type="column"
              :opts="opts5"
              :chartData="chartData5"
              class="charts-box2"
            />
          </dv-border-box-12>
        </div>
        <div class="box">
          <dv-border-box-12 style="padding: 10px">
            <p class="box_title">
              <span style="margin-right: -195px">各维度得分</span
              ><el-select
                style="float: right"
                v-model="templateId3"
                placeholder="模板"
                @change="get其他雷达()"
                size="small"
              >
                <el-option
                  v-for="item in 模板list"
                  :key="item.Id"
                  :label="item.Name"
                  :value="item.Id"
                >
                </el-option>
              </el-select>
            </p>
            <qiun-vue-ucharts
              type="radar"
              :opts="opts6"
              :chartData="chartData6"
              class="charts-box"
            />
          </dv-border-box-12>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
    
    <script>
import qiunVueUcharts from "@qiun/vue-ucharts";
import mapData from "@/common/staticData.json";
export default {
  components: {
    qiunVueUcharts,
  },
  data() {
    return {
      checkHospitalId: [],
      query: {
        year: "",
        systemCategory: "",
        orgId: "",
        startTime: "",
        endTime: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 3);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 12);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近两年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 36);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      OrganTree: [],
      value1: "",
      chartData1: {},
      opts1: {
        fontColor: "#fff",
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          fontColor: "#fff",
          disableGrid: true,
        },
        yAxis: {
          data: [
            {
              min: 0,
            },
          ],
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
          },
        },
      },
      chartData2: {},
      opts2: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [5, 5, 5, 5],
        dataLabel: false,
        enableScroll: false,
        fontColor: "#fff",
        legend: {
          show: true,
          position: "right",
          lineHeight: 25,
        },
        extra: {
          radar: {
            gridType: "radar",
            gridColor: "#fff",
            gridCount: 3,
            opacity: 0.2,
            max: 100,
            labelShow: true,
            border: true,
          },
        },
      },
      chartData3: {},
      opts3: {
        fontColor: "#fff",
        color: [
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          fontColor: "#fff",
          disableGrid: true,
        },
        yAxis: {
          data: [
            {
              min: 0,
            },
          ],
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
          },
        },
      },
      chartData4: {},
      opts4: {
        color: [
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [5, 5, 5, 5],
        dataLabel: false,
        enableScroll: false,
        fontColor: "#fff",
        legend: {
          show: true,
          position: "right",
          lineHeight: 25,
        },
        extra: {
          radar: {
            gridType: "radar",
            gridColor: "#fff",
            gridCount: 3,
            opacity: 0.2,
            max: 100,
            labelShow: true,
            border: true,
          },
        },
      },
      chartData5: {},
      opts5: {
        fontColor: "#fff",
        color: [
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          fontColor: "#fff",
          disableGrid: true,
        },
        yAxis: {
          data: [
            {
              min: 0,
            },
          ],
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
          },
        },
      },
      chartData6: {},
      opts6: {
        color: [
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [5, 5, 5, 5],
        fontColor: "#fff",
        dataLabel: false,
        enableScroll: false,
        legend: {
          show: true,
          position: "right",
          lineHeight: 25,
        },
        extra: {
          radar: {
            gridType: "radar",
            gridColor: "#fff",
            gridCount: 3,
            opacity: 0.2,
            max: 100,
            labelShow: true,
            border: true,
          },
        },
      },
      isLoading: false,
      isData: {},
      mapData,
      门诊月列表: [],
      住院月列表: [],
      其他月列表: [],
      门诊月info: {},
      住院月info: {},
      其他月info: {},
      模板list: [],
      templateId1: "",
      templateId2: "",
      templateId3: "",
    };
  },
  created() {
    this.getOrgan();
  },
  mounted() {},
  methods: {
    timer(val) {
      this.query.startTime = val[0];
      this.query.endTime = val[1];
      this.getInfo();
    },
    getOrgan() {
      this.$get(
        "/Task/GetOrganTree?id=" + window.localStorage.getItem("hospitalId2")
      ).then((res) => {
        this.OrganTree = res.Data;
      });
    },
    getTemp() {
      this.$get(
        "/Tj/GetTemplateBySystemCategory/满意度调查?orgId=" + this.query.orgId
      ).then((res) => {
        this.模板list = res.Data;
      });
    },
    getInfo() {
      console.log(this.query);
      if (!this.query.startTime || !this.query.orgId) {
        return;
      }
      this.isLoading = true;
      this.get门诊();
      this.getTemp();
      this.isLoading = false;
    },
    get门诊() {
      var body = this.query;
      body.systemCategory = "门诊满意度";
      this.$post("/Tj/Radar", body).then((res) => {
        this.门诊雷达 = res.Data;
      });
      this.$post("/Tj/GetAllCount", body).then((res) => {
        this.门诊月info = res.Data;
      });
      this.$post("/Tj/GetCount", body).then((res) => {
        this.门诊月列表 = res.Data;
        this.get住院();
      });
    },
    get门诊雷达() {
      if (!this.query.startTime || !this.query.orgId || !this.templateId1) {
        return;
      }
      var body = this.query;
      body.templateId = this.templateId1;
      body.systemCategory = "门诊满意度";
      this.$post("/Tj/Radar", body).then((res) => {
        this.门诊雷达 = res.Data;
        this.getServerData2();
      });
    },
    get住院() {
      var body = this.query;
      body.systemCategory = "住院满意度";
      this.$post("/Tj/GetAllCount", body).then((res) => {
        this.住院月info = res.Data;
      });
      this.$post("/Tj/GetCount", body).then((res) => {
        this.住院月列表 = res.Data;
        this.get其他();
      });
    },
    get住院雷达() {
      if (!this.query.startTime || !this.query.orgId || !this.templateId2) {
        return;
      }
      var body = this.query;
      body.templateId = this.templateId2;
      body.systemCategory = "住院满意度";
      this.$post("/Tj/Radar", body).then((res) => {
        this.住院雷达 = res.Data;
        this.getServerData4();
      });
    },
    get其他() {
      var body = this.query;
      body.systemCategory = "其他满意度";
      this.$post("/Tj/GetAllCount", body).then((res) => {
        this.其他月info = res.Data;
      });
      this.$post("/Tj/GetCount", body).then((res) => {
        this.其他月列表 = res.Data;
        this.init_charts();
      });
    },
    get其他雷达() {
      if (!this.query.startTime || !this.query.orgId || !this.templateId3) {
        return;
      }
      var body = this.query;
      body.templateId = this.templateId3;
      body.systemCategory = "其他满意度";
      this.$post("/Tj/Radar", body).then((res) => {
        this.其他雷达 = res.Data;
        this.getServerData6();
      });
    },
    init_charts() {
      this.getServerData1();
      this.getServerData3();
      this.getServerData5();
    },
    getServerData1() {
      var list1 = [];
      var list2 = [];
      for (var i in this.门诊月列表) {
        list1.push(this.门诊月列表[i].月份 + "月");
        list2.push(this.门诊月列表[i].数量);
      }
      let res = {
        categories: list1,
        series: [
          {
            name: "收集数量",
            data: list2,
          },
        ],
      };
      this.chartData1 = res;
    },
    getServerData2() {
      var list1 = [];
      var list2 = [];
      for (var i in this.门诊雷达) {
        list1.push(this.门诊雷达[i].分析点);
        list2.push(this.门诊雷达[i].分数);
      }
      let res = {
        categories: list1,
        series: [
          {
            name: this.query.year,
            data: list2,
          },
        ],
      };
      // this.chartData2 = JSON.parse(JSON.stradarify(res));
      this.chartData2 = res;
    },
    getServerData3() {
      var list1 = [];
      var list2 = [];
      for (var i in this.住院月列表) {
        list1.push(this.住院月列表[i].月份 + "月");
        list2.push(this.住院月列表[i].数量);
      }
      let res = {
        categories: list1,
        series: [
          {
            name: "收集数量",
            data: list2,
          },
        ],
      };
      this.chartData3 = res;
    },
    getServerData4() {
      var list1 = [];
      var list2 = [];
      for (var i in this.住院雷达) {
        list1.push(this.住院雷达[i].分析点);
        list2.push(this.住院雷达[i].分数);
      }
      let res = {
        categories: list1,
        series: [
          {
            name: this.query.year,
            data: list2,
          },
        ],
      };
      // this.chartData2 = JSON.parse(JSON.stradarify(res));
      this.chartData4 = res;
    },
    getServerData5() {
      var list1 = [];
      var list2 = [];
      for (var i in this.其他月列表) {
        list1.push(this.其他月列表[i].月份 + "月");
        list2.push(this.其他月列表[i].数量);
      }
      let res = {
        categories: list1,
        series: [
          {
            name: "收集数量",
            data: list2,
          },
        ],
      };
      this.chartData5 = res;
    },
    getServerData6() {
      var list1 = [];
      var list2 = [];
      for (var i in this.其他雷达) {
        list1.push(this.其他雷达[i].分析点);
        list2.push(this.其他雷达[i].分数);
      }
      let res = {
        categories: list1,
        series: [
          {
            name: this.query.year,
            data: list2,
          },
        ],
      };
      // this.chartData2 = JSON.parse(JSON.stradarify(res));
      this.chartData6 = res;
    },
  },
  filters: {},
};
</script>
    
    <style scoped lang="scss">
.home {
  width: 100%;
  height: calc(100vh - 46px);
  background-image: url("../../assets/image/home_bj.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 15px;
  .top {
    text-align: center;
    color: #fff;
    .psa {
      z-index: 999;
      position: absolute;
      top: 20px;
    }
    .psb {
      z-index: 999;
      position: absolute;
      right: 30px;
      top: 20px;
    }
    .search_style {
      width: 150px;
      position: absolute;
      left: 0;
    }
    .search_style2 {
      width: 150px;
      position: absolute;
      left: 160px;
    }
    .search_style3 {
      width: 150px;
      position: absolute;
      left: 320px;
    }
  }
  .box {
    background-color: rgba(0, 0, 0, 0.1);
    height: calc((100vh - 190px) / 2);
    margin-bottom: 15px;
    border-radius: 15px;
    .box_title {
      text-align: center;
      color: rgb(152, 253, 250);
      padding: 5px 0;
      padding-bottom: 0;
    }
  }
  .box2 {
    // height: calc((100vh - 190px) / 3);
    margin-bottom: 15px;
    border-radius: 15px;
    .box_title {
      text-align: center;
      color: rgb(152, 253, 250);
      padding: 5px 0;
      padding-bottom: 0;
      margin-bottom: 10px;
    }
  }
  .charts-box {
    width: 100%;
    height: calc((100vh - 300px) / 2);
    padding-top: 8px;
  }
  .charts-box2 {
    width: 100%;
    height: calc((100vh - 400px) / 2);
    padding-top: 8px;
    margin-top: 5px;
  }
}

//
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 10px;
}
::v-deep .el-input__inner {
  background-color: #00083e;
  color: #fff;
  border: 1px solid #31cae4;
}

.el-select-dropdown__item {
  line-height: 35px;
  color: #fff;
  background-color: #00083e;
}
::v-deep .el-select-dropdown {
  background-color: transparent;
  border: 1px solid blue;
}
::v-deep .el-select-dropdown__list {
  padding: 0 !important;
}
::v-deep .el-popper[x-placement^="bottom"] {
  margin-top: 0px;
}
::v-deep .el-popper .popper__arrow,
::v-deep .el-popper .popper__arrow::after {
  display: none;
}
.el-select-dropdown__item:hover {
  background-color: rgba(0, 225, 219, 0.690196078431373);
}
::v-deep .el-range-editor--mini .el-range-input {
  background-color: #00083e;
  color: fff;
}
::v-deep .el-range-editor--mini .el-range-separator {
  color: #fff;
}
.tac {
  text-align: center;
}
.cfff {
  color: #fff;
  font-size: 12px;
}
.c01 {
  color: #1890ff;
  font-size: 24px;
  font-weight: 700;
}
.c02 {
  color: #91cb74;
  font-size: 24px;
  font-weight: 700;
}
.c03 {
  color: #fac858;
  font-size: 24px;
  font-weight: 700;
}
p {
  padding: 0;
  margin: 0;
}
</style>
  
  